{% extends "/layout/layout.html" %}

{% block container %}
<style type="text/css" media="screen">
.carousel-item {
	max-height: 33rem;
}
.carousel{
	margin-bottom: 40px;
}
</style>
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://dongdong-bucket.oss-cn-beijing.aliyuncs.com/web/images/banner04.jpg" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="https://dongdong-bucket.oss-cn-beijing.aliyuncs.com/web/images/banner05.jpg" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="https://dongdong-bucket.oss-cn-beijing.aliyuncs.com/web/images/banner04.jpg" class="d-block w-100" alt="...">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

<div style="width: 80%; margin: auto;">
	<div class="row row-cols-1 row-cols-md-3">
	  <div class="col mb-4">
	    <div class="card">
	      <img src="https://dongdong-bucket.oss-cn-beijing.aliyuncs.com/web/images/banner01.jpg" class="card-img-top" alt="...">
	      <div class="card-body">
	        <h5 class="card-title">Card title</h5>
	        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
	      </div>
	    </div>
	  </div>
	  <div class="col mb-4">
	    <div class="card">
	      <img src="https://dongdong-bucket.oss-cn-beijing.aliyuncs.com/web/images/banner02.jpg" class="card-img-top" alt="...">
	      <div class="card-body">
	        <h5 class="card-title">Card title</h5>
	        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
	      </div>
	    </div>
	  </div>
	  <div class="col mb-4">
	    <div class="card">
	      <img src="https://dongdong-bucket.oss-cn-beijing.aliyuncs.com/web/images/banner03.jpg" class="card-img-top" alt="...">
	      <div class="card-body">
	        <h5 class="card-title">Card title</h5>
	        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
	      </div>
	    </div>
	  </div>
	  <div class="col mb-4">
	    <div class="card">
	      <img src="https://dongdong-bucket.oss-cn-beijing.aliyuncs.com/web/images/banner06.jpg" alt="...">
	      <div class="card-body">
	        <h5 class="card-title">Card title</h5>
	        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
	      </div>
	    </div>
	  </div>
	  <div class="col mb-4">
	    <div class="card">
	      <img src="https://dongdong-bucket.oss-cn-beijing.aliyuncs.com/web/images/banner07.jpg" alt="...">
	      <div class="card-body">
	        <h5 class="card-title">Card title</h5>
	        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
	      </div>
	    </div>
	  </div>
	  <div class="col mb-4">
	    <div class="card">
	      <img src="https://dongdong-bucket.oss-cn-beijing.aliyuncs.com/web/images/banner08.jpg" class="card-img-top" alt="...">
	      <div class="card-body">
	        <h5 class="card-title">Card title</h5>
	        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
	      </div>
	    </div>
	  </div>
	</div>
</div>
{% endblock %}
